<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/buttons.css">
    <style>
        html, body, .bgDIV, .bgDIV > *, #iframeDIV {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        body {
            background: #000;
            background: linear-gradient(#000 50%,#010b17 50%);
            font-size: 12pt;
            font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif, monospace;
        }
        img[src=""], img:not([src]) {
            visibility: hidden;
        }
        a:-webkit-any-link {
            color: inherit;
        }
        body * {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -ms-user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            text-decoration: none;
            outline: none;
        }
        body > *, .bgELE, #iframeDIV {
            position: absolute;
        }
        /* #theme-swich {
            position: fixed;
            top: 1em;
            right: 1em;
            width: 36pt;
            height: 36pt;
            line-height: 36pt;
            border-radius: 50%;
            font-size: 1.2em;
            text-align: center;
            color: #6885A0;
            background: rgba(125, 160, 192, 0.05);
            box-shadow: 0 0 0.8em rgba(125, 160, 192, 0.4), inset 0 0 0.4em rgba(125, 160, 192, 0.25);
            opacity: 0.6;
            transition: opacity 0.25s;
        }
        #theme-swich:active {
            opacity: 1;
            transition: opacity 0.1s;
        } */
        .bgDIV, .bgELE {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-position: center;
            overflow: hidden;
        }
        .bgDIV > * {
            transition: opacity 0.6s;
        }
        .panorama {
            opacity: 0;
            visibility: hidden;
        }
        .bg1 {
            background-image: url("../img/pictures/index.jpg");
            background-repeat: no-repeat;
            background-size: contain;
        }
        .bg2 {
            background-image: url("../img/pictures/starry.png");
            background-size: 68vh 100%;
            background-size: calc(100vh * 3404/5006) 100%;
        }
        @media only screen and (min-width: 56.25vh) {
            body {
                background: linear-gradient(#000,#010b17);
            }
            .bg1 {
                width: 100%;
                background-size: cover;
            }
        }
        @media only screen and (min-width: 67.5vh) {
            .bg1 {
                width: calc(120vh * 1080/1920);
            }
        }

        #logon-index {
            width: 80%;
            bottom: 8%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            flex-shrink: 0;
            transition: opacity 0.6s;
        }
        #logon-index button {
            border-radius: 200pt;
            min-height: 35pt;
            padding: 0 22pt;
            text-indent: 1pt;
            letter-spacing: 1pt;
            font-weight: 500;
            white-space: nowrap;
            background: transparent;
        }
        #logon-index button:first-child {
            margin-right: 6%;
            color: #16EB7D;
            border: 2px solid #16EB7D;
        }
        #logon-index button:last-child {
            margin-left: 6%;
            color: #50B4FF;
            border: 2px solid #50B4FF;
        }
        #logon-index button:first-child:active {
            text-shadow: 0 0 4pt rgba(22, 235, 125, 0.5);
            background: rgba(100, 230, 160, 0.2);
            opacity: 0.75;
        }
        #logon-index button:last-child:active {
            text-shadow: 0 0 4pt rgba(80, 180, 255, 0.5);
            background: rgba(69, 160, 227, 0.2);
            opacity: 0.75;
        }

        #logon-regs {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: #FFF;
            transition: opacity 0.4s, background 0.4s;
        }
        .logon-logo {
            position: absolute;
            width: 80pt;
            height: 80pt;
            top: 13%;
            left: calc(50% - 40pt);
            background-position: center;
            background-size: contain;
            background-image: url(../img/logo/logo-wechat.svg);
        }
        .logon-bottom {
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 9pt;
            white-space: nowrap;
            cursor: pointer;
        }
        .logon-bottom span {
            padding: 0 1em;
            color: #5C6F99;
            border-right: 1pt solid #BDBEC1;
        }
        .logon-bottom span:last-child {
            border-right: none;
        }
        .logon-bottom span:active {
            color: #709EFF;
        }

        .logon-frame {
            position: absolute;
            width: 80%;
            max-width: 500pt;
            top: calc(13% + 100pt);
            left: 50%;
            transform: translateX(-50%);
        }
        .logon-frame > div {
            position: relative;
            width: 100%;
            min-height: 44pt;
            margin-bottom: 14pt;
            border-radius: 22pt;
            background: #F2F3F7;
            overflow: hidden;
            display: flex;
        }
        .logon-frame .logon-account {
            max-height: 44pt;
            display: block;
            transition: max-height 0.5s;
        }
        .logon-frame:not([data-mode="phone"])[data-more="show"] {
            height: 190pt;
        }
        .logon-frame:not([data-mode="phone"])[data-more="show"] .logon-account {
            max-height: 100%;
        }
        .logon-frame .logon-login {
            width: 40%;
            margin: 30pt 0 0 30%;
            font-size: 12pt;
            color: #BDBEC1;
            white-space: nowrap;
            justify-content: center;
            align-items: center;
            transition: color 0.4s;
        }
        .logon-login[data-state="true"] {
            background: linear-gradient(rgba(139, 230, 50, 0.88), rgba(98, 185, 33, 0.88));
            color: #FFF;
            transition: background 0.5s, color 0.5s;
        }

        .logon-account > div:first-child, .logon-password {
            width: 100%;
            height: 44pt;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logon-account > div:last-child {
            width: 100%;
            max-height: 132pt;
            background: transparent;
            background: linear-gradient(to top, #E1E2E5, #F2F3F7 16pt, transparent);
            overflow-y: auto;
            display: none;
        }
        .logon-account > div:last-child::-webkit-scrollbar {
            display: none;
        }
        .logon-account > div:first-child > div, .logon-password > div, .logon-frame input {
            position: relative;
            height: 100%;
            overflow: hidden;
        }
        .logon-account > div:first-child > div:nth-child(3), .logon-password > div:nth-child(3) {
            width: 15pt;
            flex-shrink: 0;
        }
        .logon-account > div:first-child > div:last-child, .logon-password > div:last-child {
            width: 30pt;
            flex-shrink: 0;
        }
        .logon-account > div:first-child > div:first-child, .logon-password > div:first-child {
            width: 50pt;
            flex-shrink: 0;
        }
        .logon-account > div:first-child > div:nth-child(2), .logon-password > div:nth-child(2) {
            width: 100%;
        }
        .logon-frame input {
            width: calc(100% - 10pt);
            padding: 0 5pt;
            border: none;   
            text-align: center;
            background: none;
            font-size: 14pt;
            color: #141313;
        }
        .logon-frame input::-webkit-input-placeholder {
            font-size: 12pt;
            color: #BDBEC1;
        }
        .logon-account-info img {
            width: 34pt;
            height: 34pt;
            margin: 5pt 0 0 10pt;
            border-radius: 50%;
            object-fit: cover;
        }
        .logon-account-info span, .logon-password-info > * {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-40%, -50%);
            white-space: nowrap;
            text-align: center;
        }
        .logon-account-info span, .logon-password-info span {
            font-size: 12pt;
            color: #7E7F7F;
        }
        .logon-account > div:last-child > div {
            position: relative;
            width: 100%;
            height: 44pt;
        }
        .logon-account-more-choose {
            width: calc(100% - 30pt);
            height: 100%;
            display: flex;
            align-items: center;
        }
        .logon-account-more-choose img{
            width: 34pt;
            height: 34pt;
            margin: 0 6pt 0 10pt;
            border-radius: 50%;
            object-fit: cover;
        }
        .logon-account-more-choose span {
            width: calc(100% - 50pt);
            font-size: 14pt;
            white-space: nowrap;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .logon-account-more-clean {
            position: absolute;
            width: 30pt;
            height: 100%;
            top: 0;
            right: 0;
        }
        .logon-password-info svg {
            width: 20pt;
        }
        .logon-frame[data-mode="phone"] .logon-account > div:first-child > div:nth-child(3),
        .logon-frame[data-mode="phone"] .logon-account:not([data-state="active"]) > div:first-child > div:last-child,
        .logon-frame:not([data-mode="phone"]) .logon-password > div:nth-child(3),
        .logon-frame:not([data-mode="phone"]) .logon-password:not([data-state="active"]) > div:last-child,
        .logon-account:not([data-state="active"]) > div:first-child > div:nth-child(3),
        .logon-password:not([data-state="active"]) > div:nth-child(3),
        .logon-password:not([data-state="active"]) > div:first-child {
            visibility: hidden;
        }
        .logon-frame[data-mode="phone"][data-code="true"] .logon-password > div:first-child {
            visibility: visible;
        }
        .logon-account > div:first-child > div:first-child > span,
        .logon-password > div:first-child span,
        .logon-password > div:first-child svg:last-of-type,
        .logon-frame[data-eyes="show"] .logon-password > div:first-child svg:first-child,
        .logon-frame[data-mode="phone"] .logon-account > div:first-child > div:first-child img,
        .logon-frame[data-mode="phone"][data-code="true"] .logon-password > div:first-child svg,
        .logon-frame:not([data-mode="phone"])[data-more="show"] .logon-password,
        .logon-frame:not([data-mode="phone"])[data-more="show"] .logon-login {
            display: none;
        }
        .logon-frame:not([data-mode="phone"])[data-more="show"] .logon-account > div:last-child,
        .logon-frame:not([data-code="true"])[data-eyes="show"] .logon-password > div:first-child svg:last-of-type,
        .logon-frame[data-mode="phone"] .logon-account > div:first-child > div:first-child span,
        .logon-frame[data-mode="phone"][data-code="true"] .logon-password > div:first-child span {
            display: block;
        }
        .logon-frame:not([data-mode="phone"]) .logon-account > div:first-child > div:nth-child(3)::before,
        .logon-frame:not([data-mode="phone"]) .logon-account > div:first-child > div:nth-child(3)::after,
        .logon-frame:not([data-mode="phone"]) .logon-password > div:last-child::before,
        .logon-frame:not([data-mode="phone"]) .logon-password > div:last-child::after,
        .logon-frame[data-mode="phone"] .logon-account > div:first-child > div:last-child::before,
        .logon-frame[data-mode="phone"] .logon-account > div:first-child > div:last-child::after,
        .logon-frame[data-mode="phone"] .logon-password > div:nth-child(3)::before,
        .logon-frame[data-mode="phone"] .logon-password > div:nth-child(3)::after,
        .logon-account-more-clean::before, .logon-account-more-clean::after {
            content: " ";
            position: absolute;
            width: 2pt;
            height: 11pt;
            top: 50%;
            left: 50%;
            border-radius: 12pt;
            background: #CACBCC;
        }
        .logon-frame:not([data-mode="phone"]) .logon-account > div:first-child > div:nth-child(3)::before,
        .logon-frame:not([data-mode="phone"]) .logon-password > div:last-child::before,
        .logon-frame[data-mode="phone"] .logon-account > div:first-child > div:last-child::before,
        .logon-frame[data-mode="phone"] .logon-password > div:nth-child(3)::before,
        .logon-account-more-clean::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }
        .logon-frame:not([data-mode="phone"]) .logon-account > div:first-child > div:nth-child(3)::after,
        .logon-frame:not([data-mode="phone"]) .logon-password > div:last-child::after,
        .logon-frame[data-mode="phone"] .logon-account > div:first-child > div:last-child::after,
        .logon-frame[data-mode="phone"] .logon-password > div:nth-child(3)::after,
        .logon-account-more-clean::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }
        .logon-frame:not([data-mode="phone"]) .logon-account > div:first-child > div:last-child::before,
        .logon-frame[data-mode="phone"] .logon-password > div:last-child::before {
            content: " ";
            position: absolute;
            width: 9pt;
            height: 9pt;
            bottom: 50%;
            right: 50%;
            transform: translate(50%, 50%);
            border-radius: 50%;
            background: #CACBCC;
        }
        .logon-frame:not([data-mode="phone"])[data-more="show"] .logon-account > div:first-child > div:last-child::before,
        .logon-frame[data-mode="phone"][data-code="true"] .logon-password > div:last-child::before {
            background: #FFF;
        }

        #iframeDIV {
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            background: #FFF;
            display: none;
        }
        #iframeDIV.iframeDIV-into {
            animation-name: iframe-into;
            display: block;
        }
        #iframeDIV.iframeDIV-quit {
            animation-name: iframe-quit;
        }
        #iframeDIV > div {
            position: relative;
            width: 100%;
            height: 8%;
            background: #EDEDED;
            box-sizing: border-box;
            border-bottom: 1pt solid rgba(128, 128, 128, 0.5);
        }
        #iframeDIV > div span {
            position: absolute;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }
        #iframeDIV > div span:first-child {
            width: 76%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #iframeDIV > div span:last-child {
            width: 12%;
            left: 0;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url(../img/icon/icon_arrow_small.svg);
        }
        #iframeDIV > iframe {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 92%;
            border: none;
        }
        @keyframes iframe-into {
            from { left: 100%; }
            to { left: 0; }
        }
        @keyframes iframe-quit {
            from { left: 0; }
            to { left: 100%; }
        }



        
        /* body[data-theme="dark"] #theme-swich {
            color: #B4DBFF;
            background: rgba(125, 160, 192, 0.2);
        } */
        body[data-theme="dark"] #logon-regs {
            background: transparent;
        }
        body[data-theme="dark"] .logon-logo {
            background-image: url(../img/logo/logo-wechat_dark.svg);
        }
        body[data-theme="dark"] .logon-frame > div {
            background: rgba(242, 243, 247, 0.4);
        }
        body[data-theme="dark"] .logon-frame input, body[data-theme="dark"] .logon-account-more-choose span {
            color: #EEE;
        }
        body[data-theme="dark"] .logon-account-info span, body[data-theme="dark"] .logon-password-info span {
            color: #BDBEC1;
        }
        body[data-theme="dark"] .logon-account > div:last-child {
            background: linear-gradient(to top, rgba(225, 226, 229, 0.3), rgba(242, 243, 247, 0.3) 16pt, transparent);
        }
        body[data-theme="dark"] .logon-login[data-state="true"] {
            background: linear-gradient(rgba(140, 197, 255, 0.88), rgba(85, 166, 250, 0.88));
        }
        body[data-theme="dark"] .logon-frame:not([data-mode="phone"]) .logon-account > div:first-child > div:last-child::before,
        body[data-theme="dark"] .logon-frame[data-mode="phone"] .logon-password > div:last-child::before {
            background: rgba(202, 203, 204, 0.3);
        }
        body[data-theme="dark"] .logon-frame:not([data-mode="phone"])[data-more="show"] .logon-account > div:first-child > div:last-child::before,
        body[data-theme="dark"] .logon-frame[data-mode="phone"][data-code="true"] .logon-password > div:last-child::before {
            background: #CACBCC;
        }

        body[data-theme="dark"] .logon-bottom span {
            color: #76AADE;
            border-color: #8692b3;
        }
        body[data-theme="dark"] .logon-bottom span:active {
            color: #BEC8FF;
        }
    </style>
</head>
<body>
    <div class="bgDIV">
        <div class="panorama"></div>
        <div class="bgELE bg1"></div>
    </div>
    <div id="logon-index">
        <button class="button button-glow">登录</button>
        <button class="button button-glow">注册</button>
    </div>
    <div id="logon-regs" style="display: none;">
        <div class="logon-logo"></div>
        
        <div class="logon-frame" data-mode="" data-more="" data-eyes="" data-code="">
            <div class="logon-account" data-state="">
                <div>
                    <div class="logon-account-info">
                        <img src="">
                        <span>+86</span>
                    </div>
                    <div><input type="text" placeholder="微信号/QQ/邮箱登录" maxlength="50"></div>
                    <div class="logon-account-clean"></div>
                    <div class="logon-account-button"></div>
                </div>
                <div>
                    <div class="logon-moreAccount" data-moreAccount="1">
                        <div class="logon-account-more-choose">
                            <img src="../img/user/header/user-header_10001.jpg">
                            <span>miikio</span>
                        </div>
                        <div class="logon-account-more-clean"></div>
                    </div>
                    <div class="logon-moreAccount" data-moreAccount="2">
                        <div class="logon-account-more-choose">
                            <img src="../img/user/header/user-header_10002.jpg">
                            <span>admin@wechat.com</span>
                        </div>
                        <div class="logon-account-more-clean"></div>
                    </div>
                    <div class="logon-moreAccount" data-moreAccount="3">
                        <div class="logon-account-more-choose">
                            <img src="../img/user/header/user-header_10003.jpg">
                            <span>1234567890</span>
                        </div>
                        <div class="logon-account-more-clean"></div>
                    </div>
                    <div class="logon-moreAccount" data-moreAccount="4">
                        <div class="logon-account-more-choose">
                            <img src="../img/user/header/user-header_10004.jpg">
                            <span>wx_user_10004</span>
                        </div>
                        <div class="logon-account-more-clean"></div>
                    </div>
                    <div class="logon-moreAccount" data-moreAccount="5">
                        <div class="logon-account-more-choose">
                            <img src="../img/user/header/user-header_10005.jpg">
                            <span>wx_user_10005</span>
                        </div>
                        <div class="logon-account-more-clean"></div>
                    </div>
                    <div class="logon-moreAccount" data-moreAccount="6">
                        <div class="logon-account-more-choose">
                            <img>
                            <span>WechatOFFER</span>
                        </div>
                        <div class="logon-account-more-clean"></div>
                    </div>
                </div>
            </div>

            <div class="logon-password" data-state="">
                <div class="logon-password-info">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 40">
                        <path d="M34,0C15.22,0,0,9,0,20S15.22,40,34,40s34-8.95,34-20S52.78,0,34,0Zm0,34A14,14,0,1,1,48,20,14,14,0,0,1,34,34Z" style="fill: #cacbcc"/>
                        <circle cx="34" cy="20" r="4" style="fill: #cacbcc"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 40">
                        <path d="M34,0C15.22,0,0,9,0,20S15.22,40,34,40s34-8.95,34-20S52.78,0,34,0ZM46,23H22a3,3,0,0,1,0-6H46a3,3,0,0,1,0,6Z" style="fill: #cacbcc"/>
                    </svg>
                    <span>获取</span>
                </div>
                <div><input type="password" placeholder="密码" maxlength="24"></div>
                <div class="logon-password-clean"></div>
                <div class="logon-password-button"></div>
            </div>

            <div class="logon-login" data-state="">登录</div>
        </div>

        <div class="logon-bottom">
            <span>手机号登录</span>
            <span>夜间主题</span>
            <span data-link="https://weixin110.qq.com">微信安全中心</span>
        </div>

        <!-- <div id="theme-swich">夜</div> -->
    </div>
    <div id="iframeDIV">
        <div>
            <span></span>
            <span></span>
        </div>
    </div>



</body>

<script src="../js/panorama.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/template.js"></script>
<script>
    var panoramaViewStart = function (d) {
        if (window.ThemeDark) {
            if (!window.panoramaView) window.panoramaView = new Panorama('.panorama', {
                images : [
                    '../img/panorama/starry_1.png',
                    '../img/panorama/starry_2.png',
                    '../img/panorama/starry_3.png',
                    '../img/panorama/starry_4.png',
                    '../img/panorama/starry_5.png',
                    '../img/panorama/starry_6.png'
                ],
                distance : 150,
                touchEvent : false
            });
            if (d != false) window.panoramaView.devicemotion(true);
        }
    };
    
    (function () {
        window.ThemeDark = new Date().getHours() < 5 || new Date().getHours() > 21 ? true : false;
        $("body").attr("data-theme", window.ThemeDark ? "dark" : "");
        $(".logon-bottom > span:nth-child(2)").text(window.ThemeDark ? "白天主题" : "夜间主题");
        panoramaViewStart(false);
        try {
            new MutationObserver(function (record) {
                $(record[0].addedNodes).find("img").each(function () {
                    this.onerror = function () { this.src = "../img/user/header/user-header_origin.svg" }
                });
            }).observe($(".logon-account > div:last-child")[0], { childList: true, subtree: true });
        } catch (err) {}
    })();

    $("#logon-index button:first-child").one("click", function () {
        panoramaViewStart();
        $(".bgELE, #logon-index").css("opacity", 0);
        $("#logon-regs").css({ opacity: 0, display: "block" });
        $(".panorama").css({ visibility: "visible", opacity: 1 });
        setTimeout(function () { $("#logon-regs").css("opacity", 1) }, 10);
        setTimeout(function () { $(".bgELE, #logon-index").css("display", "none") }, 800);
    });
    $(".logon-moreAccount img").each(function () {
        this.onerror = function () { this.src = "../img/user/header/user-header_origin.svg" }; this.src = this.src;
    });
    $(".logon-frame input").on("focus", function () {
        var par = $(this).parent().parent();
        if (!par.hasClass("logon-password")) par = par.parent();
        par.attr("data-state", "active");
        var clickother = function (e) {
            if ($(e.target).closest(par).length == 0) {
                par.attr("data-state", "");
                $("body").off("click", clickother);
            }
        };
        $("body").off("click", clickother);
        $("body").on("click", clickother);
    });
    $(".logon-frame input").on("input change", function () {
        var ac_val = $(".logon-account input").val(),
            pa_val = $(".logon-password input").val();
        if (ac_val.length > 5 && pa_val.length > 5) {
            $(".logon-login").attr("data-state", "true");
        } else if ($(".logon-login").attr("data-state")) {
            $(".logon-login").attr("data-state", "");
        }
    });
    $(".logon-account input").on("focus", function () {
        if ($(".logon-frame").attr("data-mode") == "phone") return;
        $(".logon-account")[0].accounts = [];
        $(".logon-moreAccount span").each(function () {
            $(".logon-account")[0].accounts.push(this.innerText);
        });
    });
    $(".logon-account input").on("input change", function () {
        if ($(".logon-frame").attr("data-mode") == "phone") return;
        var index = ($(".logon-account")[0].accounts || []).indexOf(this.value);
        if (index != -1) $(".logon-account-info img").attr("src", $(".logon-moreAccount img")[index].src);
        else $(".logon-account-info img").attr("src", "");
    });
    $(".logon-password-info").click(function () {
        var frame = $(".logon-frame");
        if (frame.attr("data-code") == "true") {
            if (!window.logonPasswordCodeGetting) {
                $(".logon-password-info span").text("60s");
                var time = 60; window.logonPasswordCodeGetting = true;
                var Inter = setInterval(function () {
                    if (time > 0) {
                        time--; $(".logon-password-info span").text(time + "s");
                    } else {
                        clearInterval(Inter); $(".logon-password-info span").text("获取");
                        window.logonPasswordCodeGetting = false;
                    }
                }, 1000);
            }
        } else {
            if (frame.attr("data-eyes") == "show") {
                frame.attr("data-eyes", "");
                $(".logon-password input").attr("type", "password");
            } else {
                frame.attr("data-eyes", "show");
                $(".logon-password input").attr("type", "text");
            }
        }
    });
    $(".logon-account-clean, .logon-password-clean").click(function () {
        $(this).parent().find("input").val("");
        $(".logon-login").attr("data-state", "");
        $(".logon-account-info img").attr("src", "");
    });
    $(".logon-account-button").click(function () {
        if ($(".logon-frame").attr("data-mode") == "phone") {
            $(this).parent().find("input").val("");
            $(".logon-login").attr("data-state", "");
        } else {
            $(".logon-frame").attr("data-more", $(".logon-frame").attr("data-more") != "show" && (!$(".logon-account")[0].accounts || $(".logon-account")[0].accounts.length > 0) ? "show" : "");
        }
    });
    $(".logon-password-button").click(function () {
        var frame = $(".logon-frame"), pwInput = $(".logon-password input");
        if (frame.attr("data-mode") == "phone") {
            var data = pwInput[0].inputData || (pwInput[0].inputData = { default: "", code: "" });
            if (frame.attr("data-code") == "true") {
                frame.attr("data-code", "");
                pwInput[0].inputData.code = pwInput.val();
                pwInput.attr("type", frame.attr("data-eyes") == "show" ? "text" : "password").attr("placeholder", "密码").val(data.default);
            } else {
                frame.attr("data-code", "true");
                pwInput[0].inputData.default = pwInput.val();
                pwInput.attr("type", "text").attr("placeholder", "验证码").val(data.code);
            }
        } else {
            pwInput.val("");
            $(".logon-login").attr("data-state", "");
        }
    });
    $(".logon-account-more-choose").click(function () {
        var input = $(".logon-frame input");
        input[0].value = $(this).find("span").text();
        input[1].value = "";
        $(".logon-account-info img").attr("src", $(this).find("img").attr("src"));
        $(".logon-frame").attr("data-more", "");
    });
    $(".logon-account-more-clean").click(function () {
        if (confirm("是否确定删除该帐号所有记录？")) {
            $(this).parent().remove();
            $(".logon-account")[0].accounts = [];
            $(".logon-moreAccount span").each(function () {
                $(".logon-account")[0].accounts.push(this.innerText);
            });
        }
    });
    $(".logon-bottom > span:first-child").click(function () {
        var frame = $(".logon-frame");
        var input = frame.find("input"),
            data = frame[0].inputData || (frame[0].inputData = { default: [], phone: [], code: "" });
        if (frame.attr("data-mode") == "phone") {
            this.innerText = "手机号登录";
            frame[0].inputData.phone = [input[0].value, input[1].value], frame[0].inputData.code = frame.attr("data-code");
            input[0].value = data.default[0] || "", input[1].value = data.default[1] || "";
            frame.attr("data-mode", "").attr("data-code", "");
            $(".logon-password input").attr("placeholder", "密码");
        } else {
            this.innerText = "帐号登录";
            frame[0].inputData.default = [input[0].value, input[1].value];
            input[0].value = data.phone[0] || "", input[1].value = data.phone[1] || "";
            frame.attr("data-mode", "phone").attr("data-code", frame[0].inputData.code);
            $(".logon-password input").attr("placeholder", frame[0].inputData.code ? "验证码" : "密码");
        }
        $(input[1]).attr("type", (frame.attr("data-mode") == "phone" && frame.attr("data-code") == "true") || frame.attr("data-eyes") == "show" ? "text" : "password");
        $(".logon-frame input").change();
    });
    $(".logon-bottom > span:nth-child(2)").click(function () {
        var dark = $("body").attr("data-theme") == "dark" ? true : false;
        window.ThemeDark = !dark;
        $("body").attr("data-theme", dark ? "" : "dark");
        this.innerText = dark ? "夜间主题" : "白天主题";
        if (!dark) panoramaViewStart();
    });
    $(".logon-bottom > span:last-child").click(function () {
        var iframe = document.createElement("iframe");
        iframe.src = $(this).attr("data-link");
        $("#iframeDIV").append(iframe);
        $("#iframeDIV").removeClass("iframeDIV-quit");
        $("#iframeDIV").addClass("iframeDIV-into");
        $("#iframeDIV span:first-child").text($(this).text());
    });
    $("#iframeDIV > div span:last-child").click(function () {
        $("#iframeDIV").addClass("iframeDIV-quit");
        setTimeout(function () {
            $("#iframeDIV").removeClass("iframeDIV-into");
            $("#iframeDIV iframe").remove();
        }, 550);
    });

</script>


</html>